"use strict";

/**
 * @auther wtfssd
 * Created by wtfssd on 2017/11/16
 */
import * as React from 'react'

const {View, TouchableOpacity, ScrollView, StyleSheet} = require('react-native');
const {connect} = require('react-redux');
const NavigationBar =require ( 'react-native-navbar').default;
import {commonProps, commonStyles} from "../../assets/styles/common";
import NavBackButton from "../../component/BackButton";
import MyImagePicker from "../../component/MyImagePicker";

import MyIcon from "../../component/icon";
import {toastValidateError} from "../../utils/tools";
const {Actions} = require( "react-native-router-flux");
const {createForm} = require('rc-form');
const {List, InputItem} = require('antd-mobile');
let TextAreaStyle = require('antd-mobile/lib/textarea-item/style/index.native');
const newStyle = {};

for (const key in TextAreaStyle) {
    if (Object.prototype.hasOwnProperty.call(TextAreaStyle, key)) {
        newStyle[key] = {...StyleSheet.flatten(TextAreaStyle[key])};
        if (key === 'container') {
            newStyle[key].marginLeft = 0;
            newStyle[key].borderBottomWidth = 0;
            newStyle[key].borderBottomColor = 'transparent';
        }
    }
}

class CustomMenuPage extends React.Component<ProductManagerProps, any> {


    imagePicker: MyImagePicker;

    constructor(props: any, context: any) {
        super(props, context);

    }

    onCreate = () => {
        const {dispatch, form} = this.props;
        // {validator: this.validator.bind(this)}
        form.validateFields((error, value) => {
            if (!error) {
                let {store_menu} = form.getFieldsValue();
                dispatch({
                    type: 'product/createCategory',
                    payload: {store_menu}
                });
            } else {
                toastValidateError(error);
            }
        });
    };

    render() {
        const {getFieldProps} = this.props.form;
        return (
            <View style={commonStyles.container}>
                <NavigationBar {...commonProps.navBar}
                               leftButton={<NavBackButton/>}
                               title={{title: this.props.title, tintColor: '#fff'}}
                />

                <ScrollView>
                    <List>
                        <InputItem {...getFieldProps('store_menu',{
                            rules:[
                                {required: true, message: '分类名称未填写'},
                            ]
                        })} placeholder='输入自定义菜单名称' clear extra={((p) => {
                            return (
                                <TouchableOpacity onPress={this.onCreate}>
                                    <MyIcon name={'icon-icon19'} color={'red'} size={20}/>
                                </TouchableOpacity>
                            )
                        })()}/>
                        {this.props.product.categoryList.map((item:CategoryItem,index)=>{
                            return (
                                <List.Item key={index}>{item.store_menu}</List.Item>
                            )
                        })}
                    </List>
                </ScrollView>
            </View>
        );
    }
}


const Wrapper = createForm()(CustomMenuPage);

export default connect(
    ({auth,product}) => ({auth,product})
)(Wrapper);